<template>
  <div class="content-wrapper">
    <div class="content-header">
      <el-page-header content="模板设计" @back="goBack" />
    </div>
    <div class="content-container">
      <el-form :inline="true" class="filter-container">
        <el-form-item>
          <el-button
            class="filter-item"
            size="small"
            plain
            round
            icon="el-icon-plus"
            @click="handleOpenCreateGroup"
          >
            添加记录组
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-popover placement="right" trigger="click">
            <SortCreateGroup
              :group-tree="list"
              :type="1"
              @update-data="getList"
            />
            <el-button
              slot="reference"
              class="filter-item"
              size="small"
              plain
              round
              icon="el-icon-sort"
              >排序记录组</el-button
            >
          </el-popover>
        </el-form-item>
      </el-form>
      <el-table
        :data="list"
        highlight-current-row
        default-expand-all
        row-key="rowKey"
        style="width: 100%"
        height="650"
      >
        <el-table-column label="序号" prop="sequence" width="50" />
        <el-table-column
          label="组名"
          prop="recordTemplateGroupName"
          min-width="200"
        >
          <template slot-scope="{ row }">
            <el-tooltip
              class="item"
              effect="dark"
              content="排序记录项"
              placement="top"
            >
              <el-popover placement="right" trigger="click">
                <SortCreateGroup
                  :group-tree="row.itemList"
                  :type="2"
                  :render-html="renderHtml"
                  @update-data="getList"
                />

                <el-button
                  slot="reference"
                  class="filter-item"
                  size="small"
                  plain
                  round
                  icon="el-icon-sort"
                  >{{ row.recordTemplateGroupName }}</el-button
                >
              </el-popover>
            </el-tooltip>
          </template>
        </el-table-column>
        <!-- <el-table-column label="显示记录人" prop="showWriteFlag" width="100" />
        <el-table-column label="显示审核人" prop="showCheckFlag" width="100" /> -->
        <el-table-column label="记录项" width="80" align="right">
          <template slot-scope="{ row }">
            <span v-if="row.itemList">{{ row.itemList.length }}</span>
          </template>
        </el-table-column>
        <el-table-column type="expand" width="20">
          <template slot-scope="scope">
            <el-row v-if="scope.row.itemList">
              <el-col :span="18">
                <el-table
                  key="recordTemplateItemId"
                  :data="scope.row.itemList"
                  :show-header="false"
                  highlight-current-row
                >
                  <el-table-column label="A">
                    <template slot-scope="scope">
                      <div
                        style="text-align: left"
                        v-html="
                          renderHtml(
                            scope.row.content,
                            scope.row.recordTemplateItemId
                          )
                        "
                      />
                    </template>
                  </el-table-column>
                  <el-table-column label="B" align="center" width="200px">
                    <template slot-scope="{ row }">
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="编辑项"
                        placement="top"
                      >
                        <el-button
                          icon="el-icon-edit-outline"
                          circle
                          @click.native="handleOpenUpdateItem(row)"
                        />
                      </el-tooltip>
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="删除"
                        placement="top"
                      >
                        <el-button
                          icon="el-icon-delete"
                          circle
                          @click.native="deleteItem(row)"
                        />
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </el-col>
            </el-row>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="memo" min-width="200" />
        <el-table-column label="操作" width="80">
          <template slot-scope="{ row }">
            <el-dropdown>
              <el-button type="text" class="el-icon-more" />
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item @click.native="handleOpenEditGroup(row)"
                  >编辑组</el-dropdown-item
                >
                <el-dropdown-item @click.native="copyOpenEditGroup(row)"
                  >复制组</el-dropdown-item
                >
                <el-dropdown-item @click.native="deleteGroup(row)"
                  >删除记录组</el-dropdown-item
                >
                <el-dropdown-item @click.native="handleOpenCreateItem(row)"
                  >添加记录项</el-dropdown-item
                >
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <SaveGroup
      :visible.sync="saveGroupDialogVisible"
      :dialog-status="saveGroupDialogStatus"
      :current-template-id="recordTemplateId"
      :current-group="currentRow"
      :current-sequence="list.length"
      @update-data="getList"
    />
    <CreateItem
      :visible.sync="createItemDialogVisible"
      :dialog-status="createItemDialogStatus"
      :current-group="currentRow"
      @update-data="getList"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import SaveGroup from './saveGroup.vue'
import CreateItem from './createItem.vue'
import SortCreateGroup from './sortCreateGroup.vue'

import {
  listRecordTemplateGroupByTemplateId,
  deleteTemplateGroup,
  deleteRecordTemplateItem,
  copyGroupTemplate
} from '@/api/rs/recordTemplate'
import { formatEmbedRow } from '@/utils/array-util'

import { parseToHtml } from '../scripts/base'
import { parseTextToHtml } from '../scripts/text'
import { parseOptionToHtml } from '../scripts/option'
import { parseFillToHtml } from '../scripts/fill'
import { parseTableToHtml } from '../scripts/table'
import { parseImageToHtml } from '../scripts/image'

export default {
  components: {
    Pagination,
    SaveGroup,
    CreateItem,
    SortCreateGroup
  },
  data() {
    return {
      list: [],
      recordTemplateId: null,
      currentRow: null,
      saveGroupDialogVisible: false,
      saveGroupDialogStatus: 'create',
      createItemDialogVisible: false,
      createItemDialogStatus: 'create'
    }
  },
  mounted() {
    this.recordTemplateId = this.$route.params.recordTemplateId
    this.getList()
  },
  methods: {
    goBack() {
      this.$router.push('/manufacture/template/' + this.$route.params.scope)
    },
    getList() {
      listRecordTemplateGroupByTemplateId({
        recordTemplateId: this.recordTemplateId,
        withItem: true
      }).then((response) => {
        this.list = formatEmbedRow(response.data)
      })
    },
    renderHtml(template, recordTemplateItemId) {
      const html = parseToHtml(
        template,
        null,
        [
          parseTextToHtml,
          parseOptionToHtml,
          parseFillToHtml,
          parseTableToHtml,
          parseImageToHtml
        ],
        recordTemplateItemId,
        true
      )
      return html
    },
    handleOpenCreateGroup() {
      this.saveGroupDialogStatus = 'create'
      this.saveGroupDialogVisible = true
    },
    handleOpenEditGroup(row) {
      this.currentRow = row
      this.saveGroupDialogStatus = 'update'
      this.saveGroupDialogVisible = true
    },
    handleOpenCreateItem(row) {
      this.currentRow = row
      this.createItemDialogStatus = 'create'
      this.createItemDialogVisible = true
    },
    handleOpenUpdateItem(row) {
      const data = this.renderHtml(row.content, row.recordTemplateItemId)
      row.html = data
      row.id = row.recordTemplateItemId

      this.currentRow = row
      this.createItemDialogStatus = 'update'
      this.createItemDialogVisible = true
    },

    deleteGroup(row) {
      this.$confirm('此操作将永久删除该记录组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteTemplateGroup({
            recordTemplateGroupId: row.recordTemplateGroupId
          }).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    deleteItem(row) {
      this.$confirm('此操作将永久删除该记录项, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteRecordTemplateItem({
            recordTemplateItemId: row.recordTemplateItemId
          }).then((res) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    copyOpenEditGroup(row) {
      const data = {
        recordTemplateGroupId: row.recordTemplateGroupId,
        withItem: true
      }
      copyGroupTemplate(data)
        .then((res) => {
          this.$message.success('复制成功')
          this.getList()
        })
        .finally(() => {
          this.getList()
        })
    }
  }
}
</script>

<style lang="scss">
</style>

